<template>
	<!-- 课程详情页 -->
	<div class="qy-page-course-detail pbm">
		<uni-nav-bar fixed shadow :border="false" :title="'【课程】' + (info && info.name || '')" left-icon="left"
			@clickLeft="onClickLeft"></uni-nav-bar>
		<div>
			<div class="page-banner">
				<div class="banner-default-img flex-wrap flex-middle flex-center"
					:style="{ background: 'url(' + info.imageHttpUrl + ') center no-repeat' }" v-if="info.imageHttpUrl">
					<div class="banner-default-text ellipsis2">
						{{ info.name }}
					</div>
				</div>
			</div>
			<div class="page-info-wrap">
				<div class="info-base">
					<div class="center">{{ info.name }}</div>
					<div class="top">
						<div class="top-left">
							<span class="default-tag">{{info.publicCourseLabel || '公开课'}}</span>
						</div>

						<div class="top-right">
							<span class="default-desc">共{{ info.lessonNum || 0 }}课时</span>
							<i class="font-split"></i><span class="default-desc">{{ info.studyStuNum || 0 }}
								人已加入学习</span>
						</div>
					</div>
					<div class="bottom">
						<i class="icon-clock"></i>
						<span
							class="common-font">{{ info.startDate + " - " + (info.endDate ? info.endDate : "无限期") }}</span>
					</div>
					<div class="bottom  flex-wrap flex-text-mid">
						<i class="icon-pointScore"></i>
						<div class="flex-wrap flex-text-mid">
							<span class="common-font">{{ info.credit || 0 }}学分</span>
							<span class="split-line"></span>
							<span class="common-font">{{ info.pointScore || 0 }}积分</span>
						</div>
					</div>
				</div>
				<div class="info-teac">
					<div class="teac-wrap">
						<generatePhoto width="48px" id="20" text="DEMO" style="margin-right: 0.21333rem;">
						</generatePhoto>
						<div class="wrap-content">
							<div class="name">
								<span class="name-title">DEMO</span>
								<span class="default-desc">授课讲师</span>
							</div>
							<div class="common-font2 ellipsis3">
								讲师简介
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- TABS -->
		<div class="page-tab-wrap">
			<div class="page-tab-group"></div>
			<van-tabs v-model="activeTab" sticky>
				<van-tab v-for="(item, index) in coursePanes" :key="index" :title="item.label"
					:title-class="index === coursePanes.length - 1 ? 'last' : ''">
					<div v-if="item.name == 1">
						<div class="course-base">课程简介</div>
					</div>
					<Lesson :courseId="courseId" :courseInfo="info" v-if="item.name == 2"
						:disabled="learnStatusDisabledCtrl" :currentUpdataTime="currentUpdataTime"></Lesson>
					<Appraise v-if="item.name == 3">
					</Appraise>
					<Notes v-if="item.name == 5"></Notes>
					<DiscussList v-if="item.name == 6"></DiscussList>
					<CourseData v-if="item.name == 7">
					</CourseData>
				</van-tab>
			</van-tabs>
		</div>

		<div class="page-ctrl-bar">
			<div class="left-ctrl flex-wrap flex-middle">
				<div  class="flex-wrap flex-middle" @click="addthumbUp">
					<van-icon :name="thumbUp.thumbUpFlag == 1 ? 'good-job' : 'good-job-o'" size="18" />
					<span class="common-font lh-12 mr10 fs-12">赞({{ thumbUp.thumbUpNum || 0 }})</span>
				</div>
				<div class="flex-wrap flex-middle" @click="addCollect">
					<van-icon :name="info.isCollect == 1 ? 'star' : 'star-o'" size="18" />
					<span class="common-font lh-12 fs-12">{{ info.isCollect == 1 ? "已收藏" : "收藏" }}</span>
				</div>
			</div>
			<div class="right-ctrl" @click="courseOpt(info.courseRegUserDto.learnStatus)">
				<button type="primary" class="right-btn"
					>开始学习</button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		stringify,
		parse
	} from "@/assets/js/util";
	import {
		learnStatus
	} from "@/assets/js/constant";
	import generatePhoto from "@/components/dragMaker/generatePhoto"
	import Lesson from "@/components/course/Lesson.vue";
	import DiscussList from "@/components/course/Discuss.vue";
	import CourseData from "@/components/course/CourseData.vue";
	import Appraise from "@/components/course/Appraise.vue";
	import Notes from "@/components/course/Notes.vue";
	import DataEmpty from "@/components/common/DataEmpty";
	import VanTabs from "@/components/vant/van-tabs/van-tabs.vue";
	import VanTab from "@/components/vant/van-tab/van-tab.vue";
	import VanIcon from "@/components/vant/van-icon/van-icon.vue";
	import mockData from "@/mock/course/detail.json"
	const tempTabList = [{
			label: "详情",
			name: "1"
		},
		{
			label: "课程目录",
			name: "2"
		},
		{
			label: "讨论",
			name: "6"
		},
		{
			label: "评价",
			name: "3"
		},
		{
			label: "笔记",
			name: "5"
		},
		{
			label: "资料",
			name: "7"
		}
	];
	export default {
		head() {
			return {
				title: this.title
			};
		},
		components: {
			VanIcon,
			VanTab,
			VanTabs,
			Lesson,
			DiscussList,
			CourseData,
			Appraise,
			Notes,
			DataEmpty,
			generatePhoto
		},
		data() {
			return {
				title: '课程详情',
				info: {}, 
				activeTab: 1, 
				courseId: "", 
				learnStatus: learnStatus,
				thumbUp: {},
				currentUpdataTime: ''
			};
		},
		onShow() {
			this.currentUpdataTime = new Date().getTime()
		},
		mounted() {
			this.initPage();
		},
		computed: {
			coursePanes() {
				let copy = parse(stringify(tempTabList));
				if (this.info.buyStatus === '2') {
					copy.splice(2, 5)
				} else if (this.info.type == 2 || this.info.type == 3) {
					copy.splice(
						copy.findIndex(cy => cy.name == 2),
						1
					);
					copy.splice(
						copy.findIndex(cy => cy.name == 5),
						1
					);
				}
				if (((this.info.courseType === 'C') && (!this.info.parentType || this.info.parentType === 'C'))) {
					return copy
				} else {
					return copy.filter(c => Number(c.name) <= 7)
				}
			},
			// 是否显示签到按钮(未报名则不显示签到)  和 未开启签到功能的  不显示签到
			showPageCtrlLeftBtn() {
				return (
					(this.signinObj &&
						this.info.courseRegUserDto &&
						this.info.courseRegUserDto.learnStatus != 5) ||
					(this.info.courseConfig &&
						this.info.courseConfig.isSignin == "1" &&
						this.info.isSigned == "2")
				);
			},
			showPageCtrlRightBtn() {
				return this.info.courseRegUserDto &&
					(this.info.courseRegUserDto.learnStatus == 4 || this.info.courseRegUserDto.learnStatus == 7)
			},
			learnStatusDisabledCtrl() {
				// 如果学习状态为未报名或者无权学习或者未开始，禁用 讨论，课程目录，课程考试，课程作业等按钮
				if (
					this.info &&
					this.info.courseRegUserDto &&
					(this.info.courseRegUserDto.learnStatus == 3 ||
						this.info.courseRegUserDto.learnStatus == 5
						// || this.info.courseRegUserDto.learnStatus == 1
					)) {
					return true;
				} else {
					return false;
				}
			}
		},
		methods: {
			addthumbUp(){
				this.thumbUp.thumbUpFlag=this.thumbUp.thumbUpFlag==1?2:1;
				this.thumbUp.thumbUpNum=this.thumbUp.thumbUpFlag==1?1:0;
			},
			addCollect(){
				this.info.isCollect=this.info.isCollect==1?2:1;
				this.info.isCollect=this.info.isCollect==1?1:0;
			},
			initPage() {
				this.getCourseInfo();
			},
			courseOpt(status, quit) {
				this.$uniPush({
					name: "course-learn-id-chapter",
					params: {
						id: this.courseId
					}
				});
			},
			getCourseInfo(type = '') {
				let loading = null;
				this.info = mockData.data;
				this.title = mockData.data.name
			},
			onClickLeft() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import "@/static/css/variable.scss";

	.qy-page-course-detail {
		&.pbm {
			padding-bottom: 74px;
		}

		.page-banner {
			position: relative;
			font-size: 0;

			.source {
				width: 345px;
				height: 32px;
				background: rgba(0, 0, 0, 0.6);
				border-radius: 6px;
				text-align: center;
				position: absolute;
				line-height: 32px;
				top: 8px;
				left: 50%;
				transform: translate(-50%, 0);
			}

			.quit-btn {
				position: absolute;
				right: 10px;
				top: 6px;
				font-size: 22px;
				color: #fff;
			}

			.banner-default-img {
				width: 100%;
				height: 210px;
				background: url(/static/image/course-img.png) center center no-repeat;
				background-size: cover !important;

				.banner-default-text {
					font-size: 22px;
					color: #fff;
					text-align: center;
					padding: 0 20px;
				}

			}
		}

		.page-info-wrap {
			background: #f6f6f6;
			padding: 10px;

			.info-base {
				background: #ffffff;
				border-radius: 6px;
				padding: 15px;

				.center {
					// text-indent: -10px;
				}

				.top {
					padding: 3px 0;
					display: flex;
					justify-content: space-between;
					line-height: 0;

					.top-left {
						.default-tag {
							margin-right: 5px;
						}
					}

					.top-right {
						display: flex;
						align-items: center;

						.font-split {
							margin: 0 6px;
						}

						.info-loc {
							max-width: 200px;
							display: inline-block;
							vertical-align: -2px;
						}
					}
				}

				.center {
					//max-height: 50px;
					font-size: 18px;
					font-weight: bold;
					line-height: 25px;
					margin: 5px 0;
				}

				.bottom {
					line-height: 28px;
					padding: 2px 0;

					i {
						min-width: 16px !important;
					}

					.icon-clock {
						margin-right: 5px;
					}

					.icon-credit {
						font-family: "iconfont" !important;
						font-size: 16px;
						font-style: normal;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
						vertical-align: middle;
						color: var(--color);

						&:before {
							content: "\e680";
						}
					}

					.icon-pointScore {
						font-family: "iconfont" !important;
						font-size: 16px;
						font-style: normal;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
						vertical-align: middle;
						color: var(--color);

						&:before {
							content: "\e679";
						}

						margin-right: 10px;
					}

					.common-font {
						display: inline-block;
						vertical-align: middle;
					}
				}
			}

			.info-teac {
				margin-top: 10px;

				.van-swipe {
					height: 120px;

					.van-swipe-item {
						height: 120px;
					}
				}

				.teac-wrap {
					background: #fff;
					border-radius: 6px;
					padding: 15px 15px 25px;
					display: flex;
					min-height: 120px;

					img {
						margin-right: 8px;
					}

					.wrap-content {
						width: 85%;

						.name {
							line-height: 0;
						}

						.name-title {
							font-size: 16px;
							font-weight: bold;
							line-height: 22px;
						}
					}
				}
			}
		}

		.page-tab-wrap {
			position: relative;

			.page-tab-group {
				display: none;
				position: absolute;
				right: 0px;
				background-image: url("../../../static/image/tab_group.png");
				width: 18px;
				height: 15px;
				background-size: 100%;
				top: 12px;
				z-index: 999;
				background-color: #fff;
			}

			:deep(.van-tabs__nav) {
				padding-right: 18px;

				.van-tab.last {
					// padding-right: 28px;
				}
			}

			&.fixed {
				.page-tab-group {
					position: fixed;
				}

				:deep(.van-tabs__wrap) {
					position: fixed;
					top: 0;
					z-index: 2;
					width: 100%;
				}

				:deep(.van-tabs__content) {
					padding-top: 44px;
				}
			}

			:deep(.course-base) {
				font-size: 14px;
				padding: 15px;

				img {
					max-width: 100%;
				}

				h1,
				h2,
				h3,
				h4,
				h5 {
					height: auto !important;
				}
			}

			.detail-wrap {
				padding: 15px;
				border-top: 10px solid #f6f6f6;
			}
		}

		.page-ctrl-bar {
			display: flex;
			justify-content: space-between;
			position: fixed;
			align-items: center;
			width: 100%;
			background: #fff;
			bottom: 0;
			padding: 10px 15px 15px 15px;
			box-shadow: 0px 1px 0px 0px #eeeeee;
			z-index: 10;

			.left-ctrl {
				width: 51%;
				height: 38px;
				line-height: 38px;
				margin-right: 10px;
				font-size: 12px;

				i {
					color: $primaryColor;
					font-size: 20px;
					margin-right: 3px;
				}
			}

			.right-ctrl {
				display: flex;
				width: 60%;
				flex: 1;
				white-space: nowrap;
				font-size: 12px;

				.btn-wrap {
					width: 100%;
				}

				.flex {
					flex: 1;
				}

				.plan-btn {
					white-space: nowrap;
					width: 100%;
					padding: 10px;
					//border-radius: 2px;
					//opacity: 0.6;
					background-color: #fff;
					border: 1px solid $primaryColor;
					font-weight: 400;
					color: $primaryColor;
					line-height: 16px;
					border-radius: 20px;
					font-size: 12px;

					&.plan-btn-info {
						border: 1px solid #dddddd;
						color: #7F7F7F;
					}
				}

				.buy-info-btn {
					background-color: #F9563D;
					font-size: 12px;
					color: #fff;
				}

				.plan-right-btn {
					width: 100%;
					margin-left: 5px;
					font-size: 12px;
					white-space: nowrap;
				}

				&.all {
					width: 100%;
				}

				&.double {
					display: flex;
					justify-content: center;
					white-space: nowrap;

					button {
						width: 100%;
					}

					.left-btn {
						width: 64px;
						margin-right: 10px;
						color: #fff;
						font-size: 12px;
						border: 1px solid $primaryColor;

						&.signed {
							background: #fff !important;
							color: $primaryColor;
							border: 1px solid $primaryColor;
						}
					}
				}

				button {
					width: 100%;
					height: 40px;
					border-radius: 20px;
					font-size: 12px;
					border: 0;

					&.disabled {
						color: #7f7f7f !important;
						background: #dddddd !important;
						cursor: not-allowed;
					}

					&.warning {
						background: #e18d39;
					}

					&.van-button--primary {
						background: $primaryColor;
					}
				}
			}
		}

		:deep(.qy-com-appraise-list) {
			.bottom-input-bar {
				z-index: 111;
			}
		}

		:deep(.qy-com-discuss-list) {
			.bottom-input-bar {
				z-index: 111;
			}
		}

		.cer-draw-wrap {
			position: absolute;
			left: 15px;
			bottom: 70px;
			width: calc(100% - 30px);
			height: 50px;
			background: #ffffff;
			box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
			border-radius: 6px;
			border: 1px solid #eeeeee;
			padding: 0 15px;

			button {
				width: 72px;
				height: 28px;
				padding: 0 2px;
				border: none;
				background: linear-gradient(148deg, #fbd249 0%, #f5a623 100%);
			}
		}
	}
</style>